<template>
  <div class="container">
    <a-row :gutter="[12, 12]" type="flex" v-if="roleCode">
      <a-col span="24">
        <a-row :gutter="[12,12]">
          <!-- 项目信息 -->
          <a-col :span="8" v-if="isHome">
            <a-card>
              <high-title :name="projectInfos.name">
                <img v-if="projectInfos.classify === 2" src="@assets/images/overview/test-item-icon.svg">
              </high-title>
              <div class="card-wrap">
                <tumor-index :itemsInfo="projectInfos"></tumor-index>
              </div>
            </a-card>
          </a-col>
          <!-- 待办事项 -->
          <a-col span="8" v-if="isHome">
            <a-card>
              <high-title :name="$t('all.autotext1645')" path="todo" :param="param"></high-title>
              <div class="card-wrap">
                <to-do-index :proId="proId"></to-do-index>
              </div>
            </a-card>
          </a-col>
          <!-- 快捷入口 -->
          <a-col span="8" v-if="isHome">
            <a-card>
              <high-title :name="$t('all.autotext1646')"></high-title>
              <div class="card-wrap">
                <quick-entry-index :orgOptions="orgOptions" :projectInfos="projectInfos"></quick-entry-index>
              </div>
            </a-card>
          </a-col>

          <!-- 项目整体预算 -->
          <a-col span="24" v-if="$auth('PROJECT_BOARD.OVERALL_BUDGET')">
            <a-card>
              <high-title :name="$t('all.autotext1648')" exportSign="exportSign"></high-title>
              <div class="card-wrap">
                <template>
                  <GeneralBudget from="high"></GeneralBudget>
                  <div class="gap"></div>
                </template>
              </div>
            </a-card>
          </a-col>

          <!-- 费用申请列表 -->
          <a-col
            span="24"
            v-if="$auth('PROJECT_BOARD.FEE_APPLY_LIST') || (!isHome && ($auth('PROJECT.PROJECT_PAY_V2') || $auth('PROJECT.PROJECT_BUDGET_V2') || $auth('PROJECT.PROJECT_INCOME_V2')))"
          >
            <a-card>
              <high-title :name="$t('all.autotext1647')" v-if="$auth('PROJECT_BOARD.FEE_APPLY_LIST')"></high-title>
              <div class="card-wrap" style="height: auto !important;">
                <fee-application
                  ref="applicationRef"
                  :isHome="isHome"
                  :allCenterList="allCenterList"
                  :proId="proId"
                  :listVisitStageOption="listVisitStageOption"
                />
              </div>
            </a-card>
          </a-col>

          <!-- 研究中心费用明细/项目整体预算 -->
          <a-col span="24" v-if="haveCenterPaymentAuth">
            <a-card>
              <high-title :name="$t('all.autotext1649')"></high-title>
              <div class="card-wrap" style="height: 600px;">
                <template>
                  <ResearchCenterPayment :allCenterList="allCenterList" :listVisitStageOption="listVisitStageOption"></ResearchCenterPayment>
                  <div class="gap"></div>
                </template>
              </div>
            </a-card>
          </a-col>

          <!-- 受试者费用明细 -->
          <a-col
            span="24"
            v-if="$auth('PROJECT_BOARD.EXPENSE_DETAIL_PATIENT') || $auth('PROJECT_BOARD.EXPENSE_DETAIL_RESEARCHER')"
          >
            <a-card>
              <template v-if="$auth('PROJECT_BOARD.EXPENSE_DETAIL_PATIENT')">
                <!-- 受试者费用申请 -->
                <!-- type---1研究者---2受试者 -->
                <ExpenseDetailsBoard
                  ref="subjectBoard"
                  :data="subjectData"
                  type="2"
                  :listVisitStageOption="listVisitStageOption"
                  :tableColumns="SUBJECT_TABLE_COLUMNS"
                  :researchCenterOptions="allCenterList"
                  @switchCenter="handleSubjectSwitchCenter"
                  from="high"
                >
                </ExpenseDetailsBoard>
                <div class="gap" style="margin-top:40px"></div>
                <!-- 研究者费用申请 -->
                <ExpenseDetailsBoard
                  v-if="$auth('PROJECT_BOARD.EXPENSE_DETAIL_RESEARCHER')"
                  ref="researchBoard"
                  :data="researchData"
                  type="1"
                  :tableColumns="RESEARCH_TABLE_COLUMNS"
                  :researchCenterOptions="allCenterList"
                  @switchCenter="handleResearchSwitchCenter"
                  :listVisitStageOption="listVisitStageOption"
                  from="high"
                >
                </ExpenseDetailsBoard>
              </template>
            </a-card>
          </a-col>
        </a-row>
      </a-col>
    </a-row>
    <div class="empty-div-none" v-if="!roleCode">
      <img src="@/assets/allEmpty992.png" width="300" height="300"/>
    </div>
  </div>
</template>

<script>
import highTitle from './board/components/highTitle'
import ToDoIndex from './board/todo/toDoIndex'
import QuickEntryIndex from './board/quickentry/quickEntryIndex'
import TumorIndex from './board/tumor/tumorIndex'
import FeeApplication from './board/feeApplication/index'
import GeneralBudget from '@/views/data-board/components/general-budget.vue'
import ResearchCenterPayment from '@/views/data-board/components/research-center-payment.vue'
import ExpenseDetailsBoard from '@/views/data-board/components/expense-details-board.vue'
import { SUBJECT_TABLE_COLUMNS, RESEARCH_TABLE_COLUMNS } from '@/views/data-board/config/config.js'
import { unreactive } from '@/utils/util'

import { centerList, getProjectDetail } from '@/api/projectInfo/projectInfo'
import { apiGetAllCenter } from '@api/cost/cost'
import { apiGetExpenseDetailData, listVisitStage } from '@api/dashboard/dashboard'



export default {
  components: { TumorIndex, QuickEntryIndex, ToDoIndex, highTitle, FeeApplication, GeneralBudget, ResearchCenterPayment, ExpenseDetailsBoard },
  data () {
    return {
      proId: '',
      SUBJECT_TABLE_COLUMNS: unreactive(SUBJECT_TABLE_COLUMNS),
      RESEARCH_TABLE_COLUMNS: unreactive(RESEARCH_TABLE_COLUMNS),
      orgOptions: [], // 项目中心list
      roleCode: '', // 角色code
      topStatistics: {}, // 顶部四个人数数据
      projectInfos: {}, // 新签署项目
      pushAllClickParam: {}, // 点击“全部”携带的参数
      param: {
        type: '2'
      },
      allCenterList: [],
      subjectData: {
        type: 'subject',
        typeStr: this.$t('all.autotext446'),
        detailedData: []
      },
      researchData: {
        type: 'research',
        typeStr: this.$t('all.autotext1096'),
        detailedData: []
      },
      subjectResId: '',
      researchResId: '',
      subjectApplyType: '',
      researchApplyType: '',
      listVisitStageOption: [],
      researchStageId: '',
      subjectStageId: ''
    }
  },
  computed: {
    haveCenterPaymentAuth () {
      return this.$auth('PROJECT_BOARD.PAY_SITUATION_PATIENT') || this.$auth('PROJECT_BOARD.PAY_SITUATION_RESEARCHER')
    },
    isHome () {
      return this.$route.name === 'high'
    }
  },
  props: {
    // roleCode: { type: String, required: true }
  },
  created () {
    this.initData()
  },
  mounted () {
    this.$globalVue.$off('reloadHighAll')
    this.$globalVue.$on('reloadHighAll', () => {
      this.initData()
    })
  },
  methods: {
    initData () {
      const proId = localStorage.getItem('CURRENT_PROID') || ''
      this.proId = proId
      this.getListResearch(proId)
      this.getItemsInfo(proId)
      this.getExpenseDetailData()
      this.getAllCenterList()
      this.listVisitStage()
      this.$nextTick(() => {
        this.$refs.applicationRef.getListAndFinanceRole()
      })
      this.roleCode = localStorage.getItem('CURRENT_ROLECODE') || ''
      !this.roleCode && this.$router.push({ path: 'login' })
    },
    async getListResearch (proId) {
      const params = { proId, deleted: 0 }
      const res = await centerList(params)
      const makeContent = res.content || []
      makeContent.unshift({ researchCenterNo: '', orgName: this.$t('all.autotext1650') })
      this.orgOptions = makeContent
    },
    async getItemsInfo (proId) {
      const param = { id: proId }
      this.projectInfos = await getProjectDetail(param) || {}
      this.$store.commit('UPDATE_PROJECT', this.projectInfos)
      this.$store.commit('SET_PROJECT', this.projectInfos)
    },
    WhichCenter (index) {
      this.pushAllClickParam = this.orgOptions[index] || {}
    },
    getExpenseDetailData () {
      this.getSubjectData()
      this.getResearchData()
    },
    getSubjectData () {
      const params = {
        proId: localStorage.getItem('CURRENT_PROID') || '',
        type: this.$const.COMMON_ROLE_TYPE.TESTEE.value,
        resId: this.subjectResId,
        stageId: this.subjectStageId,
        applyType: this.subjectApplyType
      }
      return apiGetExpenseDetailData(params).then(res => {
        this.subjectData.detailedData = res || {}
      })
    },
    getResearchData () {
      const params = {
        proId: localStorage.getItem('CURRENT_PROID') || '',
        type: this.$const.COMMON_ROLE_TYPE.RESEARCHER.value,
        resId: this.researchResId,
        stageId: this.researchStageId,
        applyType: this.researchApplyType
      }
      return apiGetExpenseDetailData(params).then(res => {
        this.researchData.detailedData = res || {}
      })
    },
    // 获取所有中心下拉列表
    getAllCenterList () {
      const proId = localStorage.getItem('CURRENT_PROID') || ''
      apiGetAllCenter({ proId }).then(res => {
        this.allCenterList = res
      })
    },
    // 获取访视阶段
    async listVisitStage () {
      const res = await listVisitStage({ proId: localStorage.getItem('CURRENT_PROID') })
      this.listVisitStageOption = res
    },
    handleResearchSwitchCenter (resId, stageId, applyType) {
      this.$message.info(this.$t('all.autotext485'))
      this.researchResId = resId
      this.researchStageId = stageId
      this.researchApplyType = applyType
      this.getResearchData()
    },
    handleSubjectSwitchCenter (resId, stageId, applyType) {
      this.$message.info(this.$t('all.autotext485'))
      this.subjectResId = resId
      this.subjectStageId = stageId
      this.subjectApplyType = applyType
      this.getSubjectData()
    }
  }
}
</script>

<style lang="less" scoped>
.empty-div-none{
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
}
.count-row {
  padding: 15px 8px;
  .count-col {
    .count-wrap {
      height: 108px;
      background: linear-gradient(to right, rgba(38, 217, 179, 0), rgba(38, 217, 179, 0.26));
      border-radius: 20px;
      font-size: 15px;
      .count-img{
        float: left; margin-top: -16px;
      }
      .count-title{
        float: left; margin: 16px 0 0 10px;
        .title{
          line-height: 20px;color: #000000;font-size: 16px;font-weight: 500;
        }
        .count{
          font-size: 40px; font-weight: bold;
        }
      }
      .count-variation{
        // float: right; margin: 26px 14px 0;
        position: absolute;
        right:20px;
        top:20px;
        .incre-count{
          display: flex;
          justify-content: space-evenly;
          margin-bottom: 5px;
          .i-c{
            color: #F53F3F;
            font-size: 14px;
            font-weight: bold;
            line-height: 15px;
          }
        }
        .i-c{
          color: rgba(245, 63, 63, 0.58);
          font-size: 12px;
          font-family: PingFangSC-Medium, sans-serif;
        }
      }
      &.count-red {
        background: linear-gradient(to right, rgba(38, 217, 179, 0), rgba(217, 38, 38, 0.26));
      }
      &.count-yellow {
        background: linear-gradient(to right, rgba(38, 217, 179, 0), rgba(217, 151, 38, 0.26));
      }
      &.count-blue {
        background: linear-gradient(to right, rgba(38, 217, 179, 0), rgba(38, 196, 217, 0.26));
      }
    }
  }
}
.card-wrap {
  position: relative;
  height: 260px;
  margin-top: 8px;
  .card-empty {
    padding-top: 10%;
  }
}
.card-wrap-othermin{
  .card-wrap;
  height: 250px;
}
.card-wrap400 {
  position: relative;
  height: 400px;
  margin-top: 8px;
  .card-empty {
    padding-top: 10%;
  }
}
.card-wrap-chartmin{
  .card-wrap400;
  height: 250px;
}
</style>
